<template>
	<view class="gender-title">
		请选择宝宝性别
	</view>
	<view class="gender-option">
		<view class="gender-option-content">
			<uni-icons class="boy" color="#00aaff" type="contact" size="100"></uni-icons>
		</view>
		<view class="gender-option-content">
			<uni-icons class="girl"  color="pink" type="contact-filled" size="100"></uni-icons>			
		</view>
	</view>
	<view class="gender-text">
		<view class="gender-text-left">男孩</view>
		<text class="gender-text-right">女孩</text>
	</view>
	
</template>

<script setup>
	
</script>

<style>
.gender-title{
	margin-bottom: 15px;
	font-size: 16px;
	padding: 20px;
	text-align: center;
}     
.gender-option {
	display: flex;
	justify-content: space-around;
}
.gender-option-content{
	background-color: #f5f5f5;
	padding: 20rpx 20rpx;
	border-radius: 30px;
}
.gender-text {
	font-size: 18px;
	font-weight: bold;
	display: flex;
	justify-content: space-around;
  
}
.gender-text-left{
	color: #00aaff;	
}
.gender-text-right{
	color: pink;	
}
</style>
